<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>部署库</title>
	<link rel="stylesheet" href="./css/css.css">
	<link rel="stylesheet" href="./css/leftBar.css">
	<script type="text/javascript" src="./js/jquery-1.8.3.js"></script>
	<link type="text/css" rel="Stylesheet" href="./css/style.css" />
	<script type="text/javascript" src="./js/jquery-1.7.1.min.js"></script>
	<script type="text/javascript" src="./js/messagecenter.js"></script>
	<script type="text/javascript" src="./js/common.js"></script>
	<script type="text/javascript" src="./js/jquery.page.js"></script>
	<link rel="stylesheet" href="./css/jquery.page.css">
	<style type="text/css">
		.app_text{
			color:#04A0E9;
			cursor:pointer;
			margin-left:15px;
		}`
		.app_text1{
			color:#04A0E9;
			cursor:pointer;
		}
		.page-split input{
			display:inline;
			margin:0px 4px;
		}
		.app_del{
			cursor:pointer;
			margin-left:20px;
	        color: #414B54;
		}
		.text_color{
			color:#A6A6A6;
			text-align: left;
			text-indent: 14px;
			font-size:12px;
		}
		.text_name{
			text-align:left;
			text-indent: 14px;
			font-size:13px;
		}
		.app_no{
			background-color: #83BE00;
			width: 50px;
			height: 18px;
			margin-left: 16%;
			text-indent: 4px;
			border-radius: 4px;
			color: #FFFFFF;
			font-weight: 600;
			padding-top: 2px;
		}
	</style>
</head>
<body>
<div class="left_content">

	<div class="left_block1">
		<div class="left_logo"></div>
		<div class="left_title">品牌数据库编辑器，高效工作，人性化交互</div>
		<div class="left_icons">
			<div class="left_icon1"></div>
			<div class="left_icon2"></div>
			<div class="left_icon3"></div>
		</div>
	</div>
	<div class="left_block2">
		<div class="left_menu" onclick="window.location.href='physical_topology_library';">拓扑文件库</div>
		<div class="left_menu" onclick="window.location.href='logical_application_library';">逻辑预案库</div>
		<div class="left_menu" onclick="window.location.href='deploy_topology_library';" style="background-color:#04A0E9;color:#FFFFFF;">部署库</div>
		<div class="left_menu monitor">监控</div>
		<div class="left_menu level2" >
			<div class="level2Border" onclick="window.location.href='physical_monitors';">
				物理监控
			</div>
		</div>
		<div class="left_menu level2" >
			<div class="level2Border" onclick="window.location.href='logical_monitors';">
				逻辑监控
			</div>
		</div>
		<div class="left_menu other">其他</div>
		<div class="left_menu  level22" >
			<div class="level22Border" onclick="window.location.href='commonCMD';">
				我的常用命令
			</div>
		</div>
		<div class="left_menu level22" >
			<div class="level22Border" onclick="window.location.href='generalCMD';">
				命令模板
			</div>
		</div>
	</div>
	<form th:action="@{/logout}" method="post" >
		<div class="left_block3">
			<div class="left_title">快捷管理机箱、板卡、芯片，提高工作效率便捷查找功能相关物理和逻辑链接，高效编辑请登陆BDE账号</div>
			<button class="bigmoniter" type="button" onclick="showBig();" style="cursor:pointer;">大屏监控</button>
			<button class="login"  type="submit">注销</button>
		</div>
		</form>
</div>
<div class="right_content" >
	<form id="form1">
		<input type="hidden" id="curIndex" value="0"/>
		<input type="hidden" id="maxPage" value="0"/>
		<input type="hidden" id="curId" name="curId">
		<input type="hidden" id="id" name="id">
		<div class="top-bar">
			<div style="float:left;">部署库<br><span  class="text_color"  style="font-size: 13px;">Logical&nbsp;application&nbsp;plan&nbsp;library</span></div>
			<div class="top_input" style="float:right; height:36px;margin-top: 12px;">
				<button class="add" type="button" style="margin-left:20px;border-radius: 5px;">+添加</button>
				<button class="search" type="button">搜索</button>
				<input class="s_input" id="condition" type="text" name="" placeholder="输入关键字搜索"/>
			</div>
		</div>
		<div class="table-box" >
			<div class="headerTableDiv">
				<table cellspacing="0" cellpadding="0" style="border-collapse: collapse;">
					<colgroup>
						<col width="10%">
						<col width="15%">
						<col width="8%">
						<col width="12%">
						<col width="12%">
						<col width="18%">
						<col width="25%">
					</colgroup>
					<tr>
						<td>
							<div class="text_name" style="">编号</div>
							<div class="text_color">Serial&nbsp;number</div>
						</td>
						<td>
							<div class="text_name" style="">应用名称</div>
							<div class="text_color">The&nbsp;application&nbsp;name</div>
						</td>
						<td>
							<div class="text_name" style="">创建人</div>
							<div class="text_color">founder</div>
						</td>
						<td>
							<div class="text_name" style="">创建时间</div>
							<div class="text_color">Creation&nbsp;time</div>
						</td>
						<td>
							<div class="text_name" style="">修改时间</div>
							<div class="text_color">Modify&nbsp;the&nbsp;time</div>
						</td>
						<td>
							<div class="text_name" style="">备注</div>
							<div class="text_color">note</div>
						</td>
						<td>
							<div class="text_name"style="text-indent: 80px;">操作</div>
							<div class="text_color" style="text-indent: 80px;">operation</div>
						</td>
					</tr>
				</table>
			</div>
			<div class="contentTableDiv">
				<table cellspacing="0" cellpadding="0" style="border-collapse: collapse;width:100%;" >
					<colgroup>
						<col width="10%">
						<col width="15%">
						<col width="8%">
						<col width="12%">
						<col width="12%">
						<col width="16%">
						<col width="27%">
					</colgroup>
					<tbody id="contentTableTbody"></tbody>
				</table>
			</div>
		</div>
		<!-- 分页 -->
		<div class="page-split">
            <div id="page" style="float:left;"></div>
            <div class="page_count text_color" style="float:right;font-size:13px;">共0条/0页</div>
        </div>
		<!-- 底部 -->
		<div class="bottom">
			<div class="conn">
				<div>连接服务器</div>
				<div style="color:#DBDDDC;">Connection&nbsp;Server</div>
			</div>

			<div class="server" >
				<div style="width:49%;">
					<div style="margin-left:20px;"><img class="img " src="./images/bsk/main.png"/></div>
					<div class="bt">
						<div style="width:100%;margin:20px 0 0 15px;color:#00A0E8;">主服务器</div>
						<div class="bt_fl">
							<div >编号:</div>
							<input type="text" id="ip" value="188.88.25.86" style="width:65%;">
						</div>
						<div class="bt_fl" style="margin-left:50%">
							<div>名称:</div>
							<input type="text" id="port" value="8001" style="width:50%;">
						</div>
					</div>
				</div>
				<div style="width:49%;margin-left:5px;">
					<div style="margin-left:20px;"><img class="img " src="./images/bsk/backup.png"/></div>
					<div class="bt" style="border: 1px solid #667184;">
						<div style="width:100%;margin:20px 0 0 15px;">备服务器</div>
						<div class="bt_fl" >
							<div>编号:</div>
							<input type="text" value="18.9.9.9" style="width:65%;">
						</div>
						<div class="bt_fl" style="margin-left:50%">
							<div>名称:</div>
							<input type="text" value="9" style="width:50%;">
						</div>
					</div>
				</div>
			</div>
			<div class="bt-btn" style="position: absolute;width:100%;bottom:20px;left:10px;">
				<button class="btn-s" type="button" onclick="connect();">连接</button>
				<button class="btn-s save" type="button" onclick="disconnect();">断开</button>
			</div>
		</div>

		<!-- 弹窗 -->
		<div class="pop_content" id="showInfo">
			<div class="pop_block">
				<div class="pop_barInfo" >
					<div style="font-size: 18px;">部署表信息查看</div>
					<span>deploy&nbsp;the&nbsp;table&nbsp;information&nbsp;to&nbsp;view</span>
				</div>
				<div class="exit_pop" ><img style="cursor:pointer;" alt="" src="./images/bsk/pop_exit.png" onclick="exit_pop();"></div>
				<div class="headerTableDiv2">
					<table cellspacing="0" cellpadding="0" style="border-collapse: collapse;">
						<colgroup>
							<col width="25%">
							<col width="25%">
							<col width="25%">
							<col width="25%">
						</colgroup>
						<tr>
							<td><div>序号</div></td>
							<td><div>APP名称</div></td>
							<td><div>APP_ID</div></td>
							<td><div>RIO物理地址</div></td>
						</tr>
					</table>
				</div>
				<div class="contentTableDiv2">
					<table cellspacing="0" cellpadding="0" style="border-collapse: collapse;width:100%;" >
						<colgroup>
							<col width="25%">
							<col width="25%">
							<col width="25%">
							<col width="25%">
						</colgroup>
						<tbody id="popTbody"></tbody>
					</table>
				</div>
			</div>
		</div>
			
		<!-- 添加跳转弹窗 -->
		<div class="addPop" id="showAddPop">
			<div class="addPop_block">
			<div>请在拓扑文件库中点击<span>部署逻辑配置</span>这个按钮选择一个拓扑文件</div>
			<button type="button" onclick="disSend();" style="margin-left:140px;">取消</button>
			<button type="button" onclick="sendPhy();">确定</button>
		</div>
		</div >
		
	</form>
	<form id="form222">
		<input type="hidden" name="entity">
	</form>
</div>
</body>


<script type="text/javascript">
	 /*<![CDATA[*/
	//跳转到拓扑文件库
	function sendPhy(){
		window.location.href="physical_topology_library";
	}
  
    $(".add").on("click",function(){
        $("#showAddPop").show();
    });
    function disSend(){
    	$("#showAddPop").hide();
    }
    
    $(".search").on("click",function(){
        var curIndex = 0;
        var name_like = $("#condition").val();
        getList(curIndex,name_like);
    });
    function Update(id){
       $("#id").val(id);
       $("#form1").attr({action:'[[@{/physical_view_bindors}]]'}).submit();
    }
    function Delete(id){
        var url='[[@{/deploy_topology/delete}]]';
        if(id!=null) {
			var flag = confirm("确定要删除吗?");
			if(flag){
				$.post(url, {id: id}, "JSON").done(function (data) {
				    if (data.success) {
						alert("删除成功");
						location.reload();
					}
				});
			}
        }else {
			alert("请选择要删除的id");
		}
/*         if(id!=null) {
            $.post(url, {id: id}, "JSON").done(function (data) {
                if (data) {
                    alert("删除成功");
                    window.location.href="deploy_topology_library";
                }
            });
        }else {
            alert("请选择要删除的id");
        } */
    }
     //获取列表/查询
     var allData=[];
     $(function () {
    	 getList();
     });
     var dataList;
	 function getList(curIndex,name_like){
        var url = '[[@{/deploy_topology/query}]]';
        $.ajax({
             url:url,
             data:{
                 "pageable.page":curIndex,
				 "pageable.start":curIndex*25,
				 "pageable.size":25,
				 "pageable.sort":"[{'property':'cdt','direction':'desc'}]",
				 "params.name_like":name_like,
	             "enabled":1
     		},
			 type:"POST"
     	}).done(function(data){
             $("#contentTableTbody").empty();
             dataList = data.data;
             allData=dataList;
             addData(dataList,data.total,25);
		 });
        tableSum();
    }
	//添加数据
    function addData(data,total,pageSize){
        var maxPage = Math.ceil(total/pageSize);
        $("#maxPage").val(maxPage);
	    pageCal(1,maxPage,total);
        $("#contentTableTbody").empty();
        var html = '';
        $.each(data,function(k,v){
            html += '<tr>';
            html += '<td><div  class="app_no">NO.'+(k+1)+'</div></td >';
            html += '<td><div class="app_text1" style="cursor:default;">'+v.name+'</div></td>';
            html += '<td><div class="text_color" style="text-indent: 0px;margin-left:5px;">'+v.creator+'</div></td>';
            html += '<td style="text-indent: 0px;"><div class="text_color" class="text_color" style="text-indent: 0px;margin-left:5px;">'+new Date(v.cdt).format("yyyy-MM-dd hh:mm:ss")+'</div></td>';
            if(v.lastModifyTime){
	            html += '<td ><div class="text_color" style="text-indent: 0px;margin-left:5px;">'+v.lastModifyTime+'</div></td>';
            }else{
	            html += '<td ><div class="text_color" style="text-indent: 0px;margin-left:5px;"></div></td>';
            }
            if(v.remark){
                html += '<td ><div>'+v.remark+'</div></td>';
            }else{
                html += '<td ><div></div></td>';
            }	
            html += '<td style="text-indent: 0px;">';
            html += '<a class="app_text" onclick="open_pop('+v.id+');">查看部署表</a>';
            html += '<a class="app_text" onclick="Update('+v.id+');">编辑</a>';
            html += '<a class="app_del" onclick="Delete('+v.id+');">删除</a>';
            html += '<button class="btn-s" style="margin-left:20px;" type="button" onclick="sendDep('+v.id+');">下发到网管</button>';
            html += '</td>';
            html += '</tr>';
        });
        $("#contentTableTbody").append(html);
        tableSum();
    }
    function addDataPop(data){
        $("#popTbody").empty();
        var html = '';
        $.each(data,function(k,v){
            html += '<tr>';
            html += '<td>NO.'+(k+1)+'</td>';
            html += '<td>'+v.appName+'</td>';
            html += '<td>'+v.appId+'</td>';
            html += '<td>'+v.cpuId+'</td>';
            html += '</tr>';
        });
        $("#popTbody").append(html);
        tableSum2();
    }

    function open_pop(id){
    	var data;
    	for(var i=0;i<dataList.length;i++){
    		if(dataList[i].id==id){
    			data=dataList[i].acBindors;
    			break;
    		}
    	}
    	
    	var appName;
    	var appId;
    	var cpuId;
    	var dataArr=[];
    	
		for(var i=0;i<data.length;i++){
			var dataJson={};
			dataJson.appName=data[i].app.name;
			dataJson.appId=data[i].app.id;
			dataJson.cpuId=data[i].cpu.id;
			dataArr.push(dataJson);
		}    		
    
        addDataPop(dataArr);
        $("#showInfo").show();
        tableSum2();
    }
    function exit_pop(){
        $("#showInfo").hide();
    }
    function tableSum() {
        $(".contentTableDiv").scrollTop(10);// 控制滚动条下移10px
        if ($(".contentTableDiv").scrollTop() > 0) {
            var scrollWidth = getScrollbarWidth();
            $(".contentTableDiv").css("right",(30-scrollWidth)+"px");
        } else {
            $(".contentTableDiv").css("right", 30 + "px");

            $(".contentTableDiv table").css("width", "100%");
        }
        $(".contentTableDiv").scrollTop(0);// 滚动条返回顶部
    }
    function tableSum2() {
        $(".contentTableDiv2").scrollTop(10);// 控制滚动条下移10px
        if ($(".contentTableDiv2").scrollTop() > 0) {
            var scrollWidth = getScrollbarWidth();
            $(".contentTableDiv2").css("right",(30-scrollWidth)+"px");
        } else {
            $(".contentTableDiv").css("right", 30 + "px");

            $(".contentTableDiv2 table").css("width", "100%");
        }
        $(".contentTableDiv2").scrollTop(0);// 滚动条返回顶部
    }

    $(window).resize(function() {
        tableSum();
        tableSum2();
    });

    function getScrollbarWidth() {
        var odiv = document.createElement('div'),//创建一个div
            styles = {
                width: '100px',
                height: '100px',
                overflowY: 'scroll'//让他有滚动条
            }, i, scrollbarWidth;
        for (i in styles) odiv.style[i] = styles[i];
        document.body.appendChild(odiv);//把div添加到body中
        scrollbarWidth = odiv.offsetWidth - odiv.clientWidth;//相减
        odiv.remove();//移除创建的div
        return scrollbarWidth;//返回滚动条宽度
    }
    /*分页*/
    function pageCal(curIndex, pageCount, totalCount) {
			$("#page").Page({
			  totalPages: pageCount,//分页总数
			  liNums: 7,//分页的数字按钮数(建议取奇数)
			  activeClass: 'activP', //active 类样式定义
			  callBack : function(page){
					//console.log(page);
			        $("#contentTableTbody").empty();
					 var newAllData=[];
					for(var i=(page-1)*25;i<allData.length;i++){
						newAllData.push(allData[i]);
					}
					var html = '';
			        $.each(data,function(k,v){
			            html += '<tr>';
			            html += '<td><div  class="app_no">NO.'+(k+(page-1)*25) +'</div></td >';
			            html += '<td><div class="app_text1" style="cursor:default;">'+v.name+'</div></td>';
			            html += '<td><div class="text_color" style="text-indent: 0px;margin-left:5px;">'+v.creator+'</div></td>';
			            html += '<td style="text-indent: 0px;"><div class="text_color" class="text_color" style="text-indent: 0px;margin-left:5px;">'+new Date(v.cdt).format("yyyy-MM-dd hh:mm:ss")+'</div></td>';
			            if(v.lastModifyTime){
				            html += '<td ><div class="text_color" style="text-indent: 0px;margin-left:5px;">'+v.lastModifyTime+'</div></td>';
			            }else{
				            html += '<td ><div class="text_color" style="text-indent: 0px;margin-left:5px;"></div></td>';
			            }
			            if(v.remark){
			                html += '<td ><div>'+v.remark+'</div></td>';
			            }else{
			                html += '<td ><div></div></td>';
			            }	
			            html += '<td style="text-indent: 0px;">';
			            html += '<a class="app_text" onclick="open_pop('+v.id+');">查看部署表</a>';
			            html += '<a class="app_text" onclick="Update('+v.id+');">编辑</a>';
			            html += '<a class="app_del" onclick="Delete('+v.id+');">删除</a>';
			            html += '<button class="btn-s" style="margin-left:20px;" type="button" onclick="sendDep('+v.id+');">下发到网管</button>';
			            html += '</td>';
			            html += '</tr>';
			        });
			        $("#contentTableTbody").append(html);
			        tableSum();
			  }
		  });
        $(".page-split .page_count").html('共' + totalCount + '条/' + pageCount + '页');
	}
	function sendDep(id){
		$.ajax({
            url: "[[@{/gate_way/issued_deploy}]]",
            data:{id:id},
            contentType: "application/json",
            type: "POST",
            dataType:"JSON"
        }).done(function (result) {
        	alert("下发成功");
        });
	}
    function connect(){
    	var ip = $("#ip").val();
        //var serial = $("#serial").val();//注：此处聚会为空，下方代码使用固定值,实际应用请修改
        var port = $("#port").val();
        var url = "[[@{/gate_way/connect}]]";
        //application/json数据正确提交方式
        var data = JSON.stringify({
            "ip": name,
            "port": port
        })
        $.ajax({
            url: url,
            data:data,
            contentType: "application/json",
            type: "POST",
            dataType:"JSON"
        }).done(function (result) {
        	alert("链接成功");
        });
    }
    function disconnect(){
    	var ip = $("#ip").val();
        //var serial = $("#serial").val();//注：此处聚会为空，下方代码使用固定值,实际应用请修改
        var port = $("#port").val();
        var url = "[[@{/gate_way/disconnect}]]";
        //application/json数据正确提交方式
        var data = JSON.stringify({
            "ip": name,
            "port": port
        })
        $.ajax({
            url: url,
            data:data,
            contentType: "application/json",
            type: "POST",
            dataType:"JSON"
        }).done(function (result) {
        	alert("断开链接成功");
        });
    }
     /*]]>*/
     
     Date.prototype.format = function(fmt) { 
	     var o = { 
	        "M+" : this.getMonth()+1,                 //月份 
	        "d+" : this.getDate(),                    //日 
	        "h+" : this.getHours(),                   //小时 
	        "m+" : this.getMinutes(),                 //分 
	        "s+" : this.getSeconds(),                 //秒 
	        "q+" : Math.floor((this.getMonth()+3)/3), //季度 
	        "S"  : this.getMilliseconds()             //毫秒 
	    }; 
	    if(/(y+)/.test(fmt)) {
	            fmt=fmt.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length)); 
	    }
	     for(var k in o) {
	        if(new RegExp("("+ k +")").test(fmt)){
	             fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));
	         }
	     }
	    return fmt; 
	}
     function showBig(){
 		window.location.href="physical_monitors2"
 	}
</script>
<script type="text/javascript">
		//彈窗拖動
		$(function(){
			$(".pop_block").on({
			    mousedown: function(e){
			                var el=$(this);
			                var os = el.offset(); dx = e.pageX-os.left, dy = e.pageY-os.top;
			                $(document).on('mousemove.drag', function(e){ el.offset({top: e.pageY-dy, left: e.pageX-dx}); });
			            },
			   mouseup: function(e){ $(document).off('mousemove.drag'); }
			});
			$(".addPop_block").on({
			    mousedown: function(e){
			                var el=$(this);
			                var os = el.offset(); dx = e.pageX-os.left, dy = e.pageY-os.top;
			                $(document).on('mousemove.drag', function(e){ el.offset({top: e.pageY-dy, left: e.pageX-dx}); });
			            },
			   mouseup: function(e){ $(document).off('mousemove.drag'); }
			});
		});
	</script>
</html>
